<template>
	<view class="content">
		<image-item v-for="(item,index) in imageUrlList" :key="index" :item="item"></image-item>
	</view>
</template>

<script lang="ts" setup>
	import { ref } from 'vue'

	let imageUrlList = ref([
		'../../common/images/xx.jpg',
		'../../common/images/xx.jpg',
		'../../common/images/xx.jpg',
		'../../common/images/xx.jpg',
		'../../common/images/xx.jpg',
		'../../common/images/xx.jpg',
		'../../common/images/xx.jpg',
		'../../common/images/xx.jpg',
		'../../common/images/xx.jpg',
		'../../common/images/xx.jpg',
		'../../common/images/xx.jpg',
		'../../common/images/xx.jpg',
		'../../common/images/xx.jpg',
		'../../common/images/xx.jpg',
		'../../common/images/xx.jpg',
		'../../common/images/xx.jpg',
		'../../common/images/xx.jpg',
		'../../common/images/xx.jpg',
		'../../common/images/xx.jpg',
		'../../common/images/xx.jpg',
		'../../common/images/xx.jpg',
	])
</script>

<style lang="scss" scoped>
	.content {
		margin-top: 30rpx;
		padding: 0 16rpx;
		// column-count: 3;
		// column-gap: 2px;
		// border: 1px solid red;
		height: 1000rpx;
		width: 100%;
		// overflow: hidden;
		display: flex;
		justify-content: space-around;
		justify-items: center;
		flex-wrap: wrap;


	}
</style>